<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <title>我的购物车-有家书店</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <style>
        #box{
            width: 500px;
            margin: 200px auto;
        }
    </style>
</head>
<body>
<div id="box">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" lay-verify="pword" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" id="sj">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" id="phone" lay-verify="shouji" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
            <button type="button"  id="dx" class="layui-btn">发送验证码</button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-inline">
                <input type="text" name="cardID" lay-verify="shenfenzheng" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <input type="text" name="address" lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="zhucetijiao">注册</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

</body>

<script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['carousel','form','jquery','layer'], function(){
        var carousel = layui.carousel
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;

        //倒计时
        var time =60,timer;
        lowerTime = function() {
            time--;
            $("#dx").attr("disabled",true);
            $("#dx").text("倒计时"+time+"秒");
            if (time <= 0){
                time = 60;
                $("#dx").attr("disabled",false);
                clearInterval(timer);
                $("#dx").text("重新发送短信");
            }
        }

        //发送短信
        $("#dx").click(function () {
            //每1000毫秒调用一次 函数
            /*timer = setInterval("lowerTime()",1000);
            $("#sj").after(
                $("<div class='layui-form-item'>").append(
                    $("<label class='layui-form-label'>验证码</label>"),
                    $("<div class='layui-input-inline'>").append(
                        $("<input type='text' name='yanzhengma' id='yanzhengma' lay-verify='required' class ='layui-input'>")
                    )
                )
            )*/
            if ($("#phone").val() == ""){
                alert("请输入手机号");
            }else {
                timer = setInterval("lowerTime()",1000);
                $("#sj").after(
                    $("<div class='layui-form-item'>").append(
                        $("<label class='layui-form-label'>验证码</label>"),
                        $("<div class='layui-input-inline'>").append(
                            $("<input type='text' name='yanzhengma' id='yanzhengma' lay-verify='required' class ='layui-input'>")
                        )
                    )
                )

                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath}/user/yanzhengma',
                    data:{"phone":$("#phone").val()},
                    dataType:'json',//预期的后台数据类型
                    success:function (data) {
                        alert(JSON.stringify(data));
                    }
                })
            }
        })

        /*
        * 表单 的验证
        * */
        form.verify({
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            pword: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,shouji: [
                /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/
                ,'请输入正确的手机号格式'
            ]
            ,shenfenzheng: [
                /\d{17}(\d|X|x)/
                ,'请输入正确的身份证格式'
            ]
        });


        form.on('submit(zhucetijiao)', function(data){
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/user/zhuce',
                data:data.field,
                dataType:'json',//预期的后台数据类型
                success:function (data) {
                    if (data.code == "1001"){
                        layer.alert(data.msg, {icon: 1});
                    }else if (data.code == "1002"){
                        layer.alert(data.msg, {icon: 1});
                    }else if (data.code == "1003"){
                        layer.alert(data.msg, {icon: 1});
                    }else {
                        layer.alert(data.msg, {icon: 1});
                    }
                    setTimeout("window.location.href = 'khdlogin.jsp'",1500);

                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>
</html>
